<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="layout::common_head(~{::title}, ~{::supplement})">
	<meta charset="UTF-8">
	<title>问题列表</title>
	<script src="../static/js/jquery-3.2.1.min.js"></script>
	<script src="../static/js/semantic.js"></script>
	<link rel="stylesheet" href="../static/css/semantic.css"  />
	<link rel="stylesheet" href="../static/css/icon.css"  />
	<link href="../static/css/ionicons.min.css" rel="stylesheet" />
	<link href="../static/css/main.css" rel="stylesheet" th:href="@{css/main.css}"/>
	<link href="../static/css/pace.css" rel="stylesheet" th:href="@{css/pace.css}"/>
	<th:block th:fragment="supplement">
		<link href="../static/css/lobibox.css" rel="stylesheet" th:href="@{css/lobibox.css}"/>
		<!--<script src="http://rapapi.org/rap.plugin.js?projectId=19544&mode=0"></script>-->
		<script src="../static/js/ion.rangeSlider.js" th:src="@{js/ion.rangeSlider.js}"></script>
		<link rel="stylesheet" href="../static/css/normalize.css"
			  th:href="@{css/normalize.css}">
		<link rel="stylesheet" href="../static/css/ion.rangeSlider.css"
			  th:href="@{css/ion.rangeSlider.css}">
		<link rel="stylesheet" href="../static/css/ion.rangeSlider.skinNice.css"
			  th:href="@{css/ion.rangeSlider.skinNice.css}">
		<style type="text/css">
			/*原生button 有个下外边距*/
			.ui.modal .actions > .button {
				margin-bottom: 0;
			}
			.ui.table.dataTable thead th {
				border-left: 0px;
			}
			.ui.special.popup.confirm{
				max-height: 260px;overflow-y:auto;overflow-x:hidden
			}
			.ui.special.popup.alarmed{
				max-height: 260px;overflow-y:auto;overflow-x:hidden
			}
			#table_modal_confirm{
				overflow-y:auto;
				overflow-x:hidden;
				max-height:160px;
				margin-bottom: 10px;
			}
			/*问题详情modle固定高度*/
			.ui.segment.detailconfirm{
				height: 232px;overflow-y:auto;overflow-x:hidden
			}
			.ui.segment.detailalarmed{
				min-height: 130px;
			}
			#alertMenu{
				height: 137px;overflow-y:auto;overflow-x:hidden
			}
			#alertmessage{
				height: 40px;overflow-y:auto;overflow-x:hidden
			}
			#filter_content {
				width: 80%;
				margin-left:100px;
			}
			/*原生label 有个下外边距*/
			.ui .label {
				margin-bottom: 0;
			}
			.ui.segment {
			/* margin: 1rem 0em
			 */
			}
</style>
	</th:block>
</head>
<body>
<div id="contextWrap">
	<!--sidebar-->
	<div class="ui sidebar vertical left menu overlay  borderless visible sidemenu inverted  grey" data-color="grey"
		 th:replace="layout::left_menu">
		<a class="item logo" href="index.html">
			<img src="../static/images/logo.png" alt="stagblogo"/><img src="../static/images/thumblogo.png"
																	   alt="stagblogo" class="displaynone"/>
		</a>
		<div class="ui accordion inverted">
			<a class="title item" href="dashboard.html">
				<i class="ion-speedometer titleIcon icon"></i>仪表盘
			</a>
			<a class="title item" href="tab.html">
				<i class="ion-ios-lightbulb titleIcon icon"></i>监控视图
			</a>
			<a class="item active" href="overview.html">
				<i class="ion-ios-world titleIcon  icon"></i>业务概览
			</a>
			<div class="title item">
				<i class="ion-mouse titleIcon icon"></i>设备概览<i class="dropdown icon"></i>
			</div>
			<div class="content">
				<a class="item" href="#">服务器</a>
				<a class="item" href="#">网络设备</a>
				<a class="item" href="#">数据库</a>
				<a class="item" href="#">应用</a>
			</div>
			<a class="title item" href="#">
				<i class="ion-arrow-graph-up-right titleIcon icon"></i>视图展示
			</a>
			<div class="title item">
				<i class="ion-paintbrush titleIcon icon"></i>告警展示<i class="dropdown icon"></i>
			</div>
			<div class="content">
				<a class="item" href="#">告警日历</a>
				<a class="item" href="#">告警列表</a>
			</div>
			<a class="title item" href="#">
				<i class="ion-briefcase titleIcon icon"></i>报表统计
			</a>
		</div>

		<div class="ui dropdown item displaynone scrolling">
			<span>仪表盘1</span>
			<i class="ion-speedometer icon"></i>
			<div class="menu">
				<div class="header">
					仪表盘1
				</div>
			</div>
		</div>

		<div class="ui dropdown item displaynone scrolling">
			<span>监控视图</span>
			<i class="ion-ios-lightbulb icon"></i>
			<div class="menu">
				<div class="header">
					监控视图
				</div>
			</div>
		</div>

		<div class="ui dropdown item displaynone scrolling">
			<span>业务概览</span>
			<i class="ion-ios-world icon"></i>
			<div class="menu">
				<div class="header">
					业务概览
				</div>
			</div>
		</div>

		<div class="ui dropdown item displaynone scrolling">
			<span>设备概览</span>
			<i class="ion-mouse icon"></i>
			<div class="menu">
				<div class="header">
					设备概览
				</div>
				<div class="ui divider"></div>
				<a class="item" href="tab.html">服务器</a>
				<a class="item" href="table.html">网络设备</a>
				<a class="item" href="error.html">数据库</a>
				<a class="item" href="login.html">应用</a>
			</div>
		</div>

		<div class="ui dropdown item displaynone scrolling">
			<span>视图展示</span>
			<i class="ion-arrow-graph-up-right icon"></i>
			<div class="menu">
				<div class="header">
					视图展示
				</div>
			</div>
		</div>

		<div class="ui dropdown item displaynone scrolling">
			<span>告警展示</span>
			<i class="ion-paintbrush icon"></i>
			<div class="menu">
				<div class="header">
					告警展示
				</div>
				<div class="ui divider"></div>
				<a class="item" href="error.html">告警日历</a>
				<a class="item" href="error.html">告警列表</a>
			</div>
		</div>

		<div class="ui dropdown item displaynone scrolling">
			<span>报表统计</span>
			<a href="error.html">
				<i class="ion-briefcase icon"></i>
			</a>
		</div>

		<div class="ui divider"></div>

	</div>

	<!--sidebar-->

	<div class="pusher">
		<!--navbar-->
		<div class="navslide navwrap" th:replace="layout::top_nav">
			<div class="ui menu icon borderless grid" data-color="inverted white">
				<a class="item labeled openbtn">
					<i class="ion-navicon-round big icon"></i>
				</a>
				<div class="item ui colhidden">
					<div class="ui icon input">
						<input type="text" placeholder="Search...">
						<i class="search icon"></i>
					</div>
				</div>
				<div class="right menu colhidden">
					<div class="ui dropdown item labeled icon">
						<i class="bell icon"></i> 告警
						<div class="ui red label mini circular">6</div>
						<div class="menu">
							<div class="header">
								紧急告警
							</div>
							<div class="item">
								告警信息1……
								<div class="ui teal left pointing label">1</div>
							</div>
							<div class="item">
								告警信息2……
								<div class="ui label">51</div>
							</div>
							<div class="item">
								告警信息3……
								<div class="ui label">1</div>
							</div>
							<div class="header">
								严重告警
							</div>
							<div class="item">
								<i class="dropdown icon"></i>
								<span class="text">更多</span>
								<div class="menu">
									<div class="item">告警信息……</div>
									<div class="item">告警信息……</div>
								</div>
							</div>
						</div>
					</div>
					<div class="ui dropdown item">
						<img class="ui mini circular image" src="../static/images/0.jpg" th:src="@{images/0.jpg}"
							 alt="label-image"/>
						<div class="menu">
							<a class="item" href="mail.html">注销</a>
						</div>
					</div>
					<a class="item labeled rightsidebar computer only">
						<i class="ion-wrench large icon"></i>工具
					</a>
				</div>
			</div>
		</div>
		<!--navbar-->
		<!--maincontent-->
		<div  class="mainWrap navslide">
			<div class="ui equal width left aligned padded grid stackable">
				<!--Site Content-->
				<div class="sixteen wide column">
                    <div class="header item">
                        <h2><i class="large browser icon"></i>问题列表</h2>
                    </div>
					<div class="ui grid">
                        <div class="eight wide column">
                            <div id="filter_content" style="display: none;margin-bottom: -10px">
                                <input type="text" id="time_filter" name="time_filter" value=""/>
                            </div>
                        </div>
                        <div class="eight wide column">
                            <div class="ui basic top attached right floated buttons"  id="problemsMenu">
                                <button value="currentProblems" class="ui active button">当前问题</button>
                                <button value="recentProblems" class="ui button">最近问题</button>
                                <button value="historicalRecord" class="ui button">历史记录</button>
                            </div>
                        </div>
					</div>

					<div class="ui segment"  style=" min-height : 500px;">
						<div class="sixteen wide column">
								<table  id="problems_table" class="ui compact basic table center aligned " width="100%">
								</table>
								<!-- 查询读条 -->
								<div id="table-dimmer" class="ui inverted dimmer">
									<div class="ui text loader">正在查询</div>
								</div>
						</div>
					</div>
				</div>
				<div id="alert_popup"></div>
				<div id="ack_popup"></div>

				</div>
				<div th:fragment="problem_acknowledge_page">

					<!--确认记录弹出框 start-->
					<div class="ui small modal confirm" id="ack_modal">
						<div class="content">
							<div class="ui form">
								<div class="required inline field" id="text_field">
									<input type="hidden" id="acknowledge_eventid">
									<textarea rows="2" id="acknowledge_message" placeholder="不能为空"></textarea>
									<!--<input type="text" id="acknowledge_message" placeholder="不能为空">-->
								</div>
								<div id="acknowledge_history" class="ui segment no-padding detailconfirm">
									<table class="ui very basic very compact table center aligned">
										<thead>
										<tr>
											<th class="four wide">时间</th>
											<th class="four wide">用户</th>
											<th class="four wide">消息</th>
											<th class="four wide">用户动作</th>
										</tr></thead>
										<tbody id="acknowledge_data">
										<tr>
											<td colspan="4">无数据</td>
										</tr>
										</tbody>
									</table>
								</div>
								<div class="required inline field" id="text_checkbox"  data-position="top left">
									<div class="ui checkbox">
										<input id="acknowledge_checkbox" type="checkbox" tabindex="0" >
										<label  id="label_checkbox">关闭问题</label>
									</div>
								</div>
							</div>
						</div>
						<div class="actions">
							<div class="ui cancel button">取消</div>
							<div class="ui green approve submit button" id="submit_bnt">确认</div>
						</div>
					</div>
                </div>
                <div th:fragment="problem_event_page">
					<!--事件详情弹出框 start-->
					<div class="ui big modal detail">
						<div class="content">

							<h2 >
								<i class="list layout icon"></i>
								<span id="event_title"></span>
							</h2>

							<div class="sixteen wide column">
								<div class="ui grid">
									<div class="eight wide column">
										<div class="ui segments">
											<div class="ui segment">
												<h4 class="ui header">
													事件细节
												</h4>
											</div>
											<div class="ui segment no-padding detailconfirm">
												<table class="ui very basic compact fixed definition table center aligned">
													<tbody id="eventDetailModal">
													<tr>
														<td colspan="2">无数据</td>
													</tr>
													</tbody>
												</table>
											</div>
										</div>
									</div>
									<div class="eight wide column">
										<div class="ui segments">
											<div class="ui segment">
												<h4 class="ui header">
													确认记录
												</h4>
											</div>
											<div class="ui segment detailconfirm">
												<table class="ui very basic compact fixed single line table center aligned">
													<thead>
													<tr>
														<th width="31%">时间</th>
														<th width="15%">用户</th>
														<th width="39%">消息</th>
														<th width="15%">用户动作</th>
													</tr></thead>
													<tbody id="acknowledgeModal">
													<tr>
														<td colspan="4">无历史确认记录</td>
													</tr>
													</tbody>
												</table>
											</div>
										</div>
									</div>
									<div class="sixteen wide column">
										<div class="ui segments">
											<div class="ui segment">
												<h4 class="ui header">
													告警记录
												</h4>
											</div>
											<div class="ui segment detailalarmed">
												<div  id="nullDetailModal">无数据</div>
												<div class="ui grid"  id="alertDetailModal">
													<div class="four wide column no-padding">
														<div class="ui fluid vertical menu " id="alertMenu">
														</div>
													</div>
													<div class="twelve wide column no-padding">
														<div class="ui fluid card" >
															<div class="content">
																<div class="header">主题:<span id="subject"></span></div>
																<div class="meta">
																	<span class="right floated time"><span id="status"></span></span>
																	<span class="category">步骤:<span id="esc_step"></span> </span>
																</div>
																<div class="description" id="alertmessage">
																	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id="message"></span>
																</div>
															</div>
															<div class="extra content">
																<div class="right floated author">
																	<i class="user icon"></i> <span id="sendto"></span>(<span id="alert_type"></span>)
																</div>
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<th:block th:replace="layout::bottom_script(~{::specialScript})">
	<script src="../static/js/js.cookie.js"></script>
	<script src="../static/js/jquery.nicescroll.min.js"></script>
	<script data-pace-options='{ "ajax": false }' src="../static/js/pace.js"></script>
	<script src="../static/js/main.js"></script>
	<th:block th:fragment="specialScript">
		<script src="../static/js/jquery.dataTables.js" th:src="@{js/jquery.dataTables.js}"></script>
		<script src="../static/js/custom-datatable.js" th:src="@{js/custom-datatable.js}"></script>
		<script src="../static/js/assistantTool.js" th:src="@{js/assistantTool.js}"></script>
		<script src="../static/js/notifications.js" th:src="@{js/notifications.js}"></script>
		<script src="../static/js/custom/problem-common.js" th:src="@{js/custom/problem-common.js}"></script>
		<script src="../static/js/custom/pop-alert.js" th:src="@{js/custom/pop-alert.js}"></script>
		<script src="../static/js/custom/problem-table.js" th:src="@{js/custom/problem-table.js}"></script>
		<script src="../static/js/custom/rangeSlider-time.js" th:src="@{js/custom/rangeSlider-time.js}"></script>
	</th:block>
</th:block>
<script type="text/javascript">
	//time filter
    var slider ;

    var problemTable = $('#problems_table').problemTable();
    //页面加载完加载表格数据
    $(function() {
        //点击问题 teb 切换
        $('#problemsMenu button').on('click',function () {
            $('#problemsMenu button').removeClass('active');
            $(this).addClass('active');
            if(this.value == "currentProblems"){
                $('#filter_content').css('display','none');
                $('#table-dimmer').addClass('active');
                slider && slider.destroy();
                //获取当前问题
                $.ajax({
                    type: "get",
                    url: '/problems/get_current',
                    dataType: 'json',
                    success: function (result) {
                        if (result.success) {
                            problemTable.clear().rows.add(result.data).draw();
                            $('#table-dimmer').removeClass('active');
                        } else {

                        }
                    },
                    error: function (e) {

                    }
                });
            }else if(this.value == "recentProblems"){
                $('#filter_content').css('display','none');
                $('#table-dimmer').addClass('active');
                slider && slider.destroy();
                //获取最近问题
                $.ajax({
                    type: "get",
                    url: '/problems/get_last',
                    dataType: 'json',
                    success: function (result) {
                        if (result.success) {
                            problemTable.clear().rows.add(result.data).draw();
                            $('#table-dimmer').removeClass('active');
                        } else {

                        }
                    },
                    error: function (e) {

                    }
                });
            }else if(this.value == "historicalRecord"){

                showTimeCons(problemTable);

            }
        });

    })

    //显示时间控件
	function showTimeCons(problemTable) {

        $('#filter_content').css('display','block');

        var rangeOption = {

            onStart: (data,time_arr) => {
                var begin_time = time_arr[data.from];
                var end_time = time_arr[data.to];
                loadHidtoryData(begin_time,end_time);

			},
			onFinish: (data,time_arr) => {
                var begin_time = time_arr[data.from];
                var end_time = time_arr[data.to];
                loadHidtoryData(begin_time,end_time);
			}
		};

        slider = $('#time_filter').rangeSliderTime(rangeOption);

	}

	//加载历史数据
	function loadHidtoryData(begin_time,end_time) {
        $('#table-dimmer').addClass('active');
        //获取历史问题记录
        $.ajax({
            type: "get",
            url: '/problems/get_history?begin_time='+begin_time+'&end_time='+end_time,
            dataType: 'json',
            success: function (result) {
                if (result.success) {
                    problemTable.clear().rows.add(result.data).draw();
                    $('#table-dimmer').removeClass('active');
                } else {

                }
            },
            error: function (e) {

            }
        });
	}


</script>

</body>
</html>



